<template>
    <div class="report_content">
      <div id="lineChart" style="width: 510px; height: 300px"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  export default {
    data() {
      return {};
    },
    mounted() {
      this.$nextTick(() => {
        this.getEcharts();
      });
    },
    methods: {
      getEcharts() {
        var lineChart = document.getElementById("lineChart");
        console.log(lineChart, "11111111");
        var myChart = echarts.init(lineChart);
        var option;
        option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            icon: "react",
            itemWidth: 10,
            itemHeight: 15,
            bottom: 0,
            textStyle: {
              color: "#A7D4C6",
              fontSize: 14,
              width: 200,
            },
            itemStyle: {
              color: {
                type: "plain",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: " #00FFB5", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#00FFFB  ", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          grid: {
            top: "10%",
            left: "3%",
            right: "4%",
            bottom: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: true, //图表左右留白
              data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ],
              // x轴字体的样式
              axisLabel: {
                textStyle: {
                  color: "rgba(53, 133, 132, 1)",
                  fontSize: "14",
                },
              },
              axisTick: {
                //x轴刻度线
                show: false,
              },
              // x轴线的颜色
              axisLine: {
                lineStyle: {
                  color: "#1b3b30",
                },
              },
            },
            {
              type: "category",
              boundaryGap: true,
              // 隐藏折现图的x轴
              show: false,
              // 设置x轴字体颜色和大小
              axisLabel: {
                textStyle: {
                  color: "#ffffff",
                  fontSize: "14",
                },
              },
              axisTick: {
                //x轴刻度线
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#1b3b30", //左边线的颜色
                  // width: "2", //坐标线的宽度
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              scale: true,
              name: "单位: --",
              nameTextStyle: {
                color: "rgba(25,203,255)",
                fontSize: "14",
              },
              // 设置y轴字体颜色和大小
              axisLabel: {
                textStyle: {
                  color: "rgba(53, 133, 132, 1)",
                  fontSize: "14",
                },
              },
              axisTick: {
                //x轴刻度线
                show: false,
              },
  
              axisLine: {
                //y轴坐标轴，false为隐藏，true为显示
                show: false,
                lineStyle: {
                  color: "#1b3b30", //左边线的颜色
                  // width: "2", //坐标线的宽度
                },
              },
              // y轴分割线的设置
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#1b3b30", //左边线的颜色
                  // width: "2", //坐标线的宽度
                },
              },
            },
            {
              type: "value",
              scale: true,
              min: 0,
              max: 30,
              interval: 5,
              name: "",
              // 设置y轴顶部文字样式
              nameTextStyle: {
                color: "rgba(53, 133, 132, 1)",
                fontSize: "14",
              },
              axisLabel: {
                show: true,
                interval: "auto",
                formatter: "{value} %", //纵坐标百分比
                textStyle: {
                  color: "rgba(53, 133, 132, 1)",
                  fontSize: "14",
                },
              },
              axisTick: {
                //x轴刻度线
                show: false,
              },
              axisLine: {
                //y轴坐标轴，false为隐藏，true为显示
                show: false,
                lineStyle: {
                  color: "#1b3b30", //左边线的颜色
                  // width: "2", //坐标线的宽度
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#1b3b30", //左边线的颜色
                  // width: "2", //坐标线的宽度
                },
              },
            },
          ],
  
          series: [
            {
              markPoint: {
                data: [
                  {
                    yAxis: "420",
                    xAxis: "7月",
                  },
                ],
                symbol: "circle", // 标记图形
                symbolSize: 8, // 标记图形的大小
                // 标注点的样式
                itemStyle: {
                  color: "#FFF90A", // 标注点颜色
                },
              },
              markLine: {
                // 锁定最后一个元素展示纵向虚线
                symbol: ["none", "none"],
                label: { show: false },
                data: [{ xAxis: 7 - 1 }],
                label: {
                  show: true, // 是否展示文字
                  color: "#FFF90A",
                  fontSize: 14,
                  formatter: function () {
                    return "当前值：420";
                  },
                },
                lineStyle: {
                  color: "#00FFFB",
                  type: "solid", // 实线，不写默认虚线
                },
              },
              name: "环比增长率",
              type: "line",
              // stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 1,
                color: "#00D9D7",
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00D9D7",
                  },
                  {
                    offset: 1,
                    color: "transparent",
                  },
                ]),
              },
              emphasis: {
                focus: "series",
              },
              data: [20, 402, 231, 134, 190, 330, 420, 534, 90, 30, 20, 120],
            },
            {
              name: "当期",
              type: "line",
              // stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 1,
                color: "#00FFFB",
              },
              showSymbol: false,
              label: {
                show: true,
                position: "top",
              },
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00FFFB",
                  },
                  {
                    offset: 1,
                    color: "transparent",
                  },
                ]),
              },
              emphasis: {
                focus: "series",
              },
              data: [485, 400, 181, 234, 210, 290, 150, 234, 210, 290, 150, 365],
            },
            {
              name: "上期",
              type: "line",
              // stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 1,
                color: "#F57F01",
              },
              showSymbol: false,
              label: {
                show: true,
                position: "top",
              },
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#F57F01",
                  },
                  {
                    offset: 1,
                    color: "transparent",
                  },
                ]),
              },
              emphasis: {
                focus: "series",
              },
              data: [111, 533, 112, 234, 582, 290, 150, 332, 210, 290, 556, 89],
            },
          ],
        };
  
        option && myChart.setOption(option);
      },
    },
  };
  </script>
  
  <style lang="sss" scoped>
  .report_content {
    width:510px;
  }

  </style>